<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Let's HighCharts</title>

    <link rel="stylesheet" type="text/css" href="gridster/jquery.gridster.min.css"/>

    <script type="text/javascript" src="jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="jquery/plugins/highcharts/packageMatchMonitor.js"></script>
    <script type="text/javascript" src="highcharts/highcharts.js"></script>

    <script type="text/javascript">
        $(function () {
            $('#packageMatchMonitorChart').packageMatchMonitor();

            $("#packageMatchMonitorChart").speak();

            $('#packageUrlMatchRatesChart').highcharts({
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Package URL Match Rates'
                },
                subtitle: {
                    text: 'Package URL Match Rates'
                },
                xAxis: {
                    categories: ['mainmenu_widgets', 'kb', 'cis-spfk', 'cis-mainmenu', 'cis-gem', 'cis-eu'],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Match Rates',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    valueSuffix: ''
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'),
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [
                    {
                        name: 'Yesterday',
                        data: [99.7, 100, 100, 100, 100, 93.3]
                    },
                    {
                        name: 'Avg10Day',
                        data: [99.7, 100, 100, 95, 56, 98]
                    },
                    {
                        name: 'Avg30Day',
                        data: [95, 99.4, 80.5, 100, 65.7, 68.9]
                    }
                ]
            });
        });
    </script>
</head>
<body>
<div id="packageMatchMonitorChart" style="width: 400px;height: 500px;float: left"></div>
<div id="packageUrlMatchRatesChart" style="width: 400px;height: 500px;float: left"></div>
</body>
</html>